{% extends "admin_base.html" %}
{% block pageTitle %}
    View Report
{% endblock %}
{% block pageContent %}
    <table>
        <tr>
            <th class="alignRight">User:</td>
            <td>{{username}}</td>
        </tr>
        <tr>
            <th class="alignRight">Labyrinth:</td>
            <td>{{labyrinth.name}}</td>
        </tr>
        <tr>
            <th class="alignRight">Session ID:</td>
            <td>{{sessionID}}</td>
        </tr>
        <tr>
            <th class="alignRight">Session Start:</td>
            <td>{{sessionStart}}</td>
        </tr>
        <tr>
            <th class="alignRight">Session Duration:</td>
            <td>{{sessionDuration}}</td>
        </tr>
        <tr>
            <th class="alignRight">Total Nodes Visited:</td>
            <td>{{totalNodesVisited}}</td>
        </tr>
        <tr>
            <th class="alignRight">Must Avoid Nodes Visited:</td>
            <td>{{mustAvoidNodesVisited}}</td>
        </tr>
        <tr>
            <th class="alignRight">Must Visit Nodes Visited:</td>
            <td>{{mustVisitNodesVisited}}</td>
        </tr>
    </table>
    <div id="charts"></div>
    <script type="text/javascript">
        function pageInit() {
                    
            new Ext.Panel({
                title: 'Time Breakdown',
                frame: true,
                renderTo: 'charts',
                width: 800,
                height: 400,
                layout: 'fit',
                bodyCfg: { id: 'timeBreakdown' }
            });
            
            new Ext.Panel({
                title: 'Counter Trends',
                frame: true,
                renderTo: 'charts',
                width: 800,
                height: 400,
                layout: 'fit',
                bodyCfg: { id: 'counterTrends' }
            });
            
            var timeBreakdownChart = new FusionCharts(siteRoot+'flash/fusioncharts/FCF_Column3D.swf', 'timeBreakdownChart', '788', '366');
            timeBreakdownChart.setDataURL('{{timeDataUrl}}');
            timeBreakdownChart.render('timeBreakdown');
            
            var counterChart = new FusionCharts(siteRoot+'flash/fusioncharts/FCF_MSLine.swf', 'counterChart', '788', '366');
            counterChart.setDataURL('{{counterDataUrl}}');
            counterChart.render('counterTrends');
            
        }
    </script>
{% endblock %}